<template>
  <view class="production-admin-workspace">
    <!-- 管理概览 -->
    <view class="management-overview bg-white margin-bottom">
      <view class="section-title padding">
        <text class="text-lg text-bold">管理概览</text>
      </view>
      <view class="overview-grid padding">
        <view class="overview-item" @click="goToProductionPlan">
          <view class="overview-icon bg-blue">
            <text class="cuIcon-calendar text-white"></text>
          </view>
          <view class="overview-info">
            <view class="overview-number">{{ managementStats.totalPlans }}</view>
            <view class="overview-label">生产计划</view>
          </view>
        </view>
        <view class="overview-item" @click="goToTaskManagement">
          <view class="overview-icon bg-green">
            <text class="cuIcon-list text-white"></text>
          </view>
          <view class="overview-info">
            <view class="overview-number">{{ managementStats.totalTasks }}</view>
            <view class="overview-label">生产任务</view>
          </view>
        </view>
        <view class="overview-item" @click="goToEmployeeManagement">
          <view class="overview-icon bg-purple">
            <text class="cuIcon-people text-white"></text>
          </view>
          <view class="overview-info">
            <view class="overview-number">{{ managementStats.totalEmployees }}</view>
            <view class="overview-label">生产员工</view>
          </view>
        </view>
        <view class="overview-item" @click="goToExceptionManagement">
          <view class="overview-icon bg-red">
            <text class="cuIcon-warn text-white"></text>
          </view>
          <view class="overview-info">
            <view class="overview-number">{{ managementStats.exceptions }}</view>
            <view class="overview-label">异常处理</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 实时监控 -->
    <view class="real-time-monitor bg-white margin-bottom">
      <view class="section-title padding">
        <text class="text-lg text-bold">实时监控</text>
      </view>
      <view class="monitor-content padding">
        <view class="monitor-row">
          <view class="monitor-item">
            <view class="monitor-label">在线员工</view>
            <view class="monitor-value text-green">{{ monitorData.onlineEmployees }}</view>
          </view>
          <view class="monitor-item">
            <view class="monitor-label">进行中任务</view>
            <view class="monitor-value text-blue">{{ monitorData.activeTasks }}</view>
          </view>
          <view class="monitor-item">
            <view class="monitor-label">今日产量</view>
            <view class="monitor-value text-orange">{{ monitorData.todayOutput }}</view>
          </view>
        </view>
        <view class="monitor-row">
          <view class="monitor-item">
            <view class="monitor-label">设备状态</view>
            <view class="monitor-value" :class="equipmentStatusClass">{{ monitorData.equipmentStatus }}</view>
          </view>
          <view class="monitor-item">
            <view class="monitor-label">质量合格率</view>
            <view class="monitor-value text-green">{{ monitorData.qualityRate }}%</view>
          </view>
          <view class="monitor-item">
            <view class="monitor-label">生产效率</view>
            <view class="monitor-value text-purple">{{ monitorData.efficiency }}%</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 待处理事项 -->
    <view class="pending-items bg-white margin-bottom">
      <view class="section-title padding">
        <text class="text-lg text-bold">待处理事项</text>
        <text class="text-sm text-gray">{{ pendingItems.length }}项</text>
      </view>
      <view class="pending-list">
        <view v-for="item in pendingItems" :key="item.id" 
              class="pending-item padding" 
              @click="handlePendingItem(item)">
          <view class="flex align-center">
            <view class="pending-icon" :class="item.priorityClass">
              <text class="cuIcon" :class="item.icon"></text>
            </view>
            <view class="flex-sub margin-left">
              <view class="pending-title">{{ item.title }}</view>
              <view class="pending-desc text-sm text-gray">{{ item.description }}</view>
            </view>
            <view class="pending-time text-sm text-gray">
              {{ item.timeText }}
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 快捷管理操作 -->
    <view class="quick-management bg-white">
      <view class="section-title padding">
        <text class="text-lg text-bold">快捷管理</text>
      </view>
      <view class="management-grid padding">
        <view class="management-item" @click="createProductionPlan">
          <view class="management-icon bg-blue">
            <text class="cuIcon-add text-white"></text>
          </view>
          <text class="management-label">新建计划</text>
        </view>
        <view class="management-item" @click="assignTasks">
          <view class="management-icon bg-green">
            <text class="cuIcon-command text-white"></text>
          </view>
          <text class="management-label">任务分配</text>
        </view>
        <view class="management-item" @click="viewReports">
          <view class="management-icon bg-orange">
            <text class="cuIcon-form text-white"></text>
          </view>
          <text class="management-label">生产报表</text>
        </view>
        <view class="management-item" @click="systemSettings">
          <view class="management-icon bg-purple">
            <text class="cuIcon-settings text-white"></text>
          </view>
          <text class="management-label">系统设置</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'ProductionAdminWorkspace',
  
  data() {
    return {
      // 管理统计数据
      managementStats: {
        totalPlans: 12,
        totalTasks: 45,
        totalEmployees: 25,
        exceptions: 3
      },
      
      // 实时监控数据
      monitorData: {
        onlineEmployees: 18,
        activeTasks: 12,
        todayOutput: 156,
        equipmentStatus: '正常',
        qualityRate: 98.5,
        efficiency: 85.2
      },
      
      // 待处理事项
      pendingItems: [
        {
          id: 1,
          title: '生产计划审批',
          description: '门窗订单WK2024001生产计划待审批',
          time: new Date(Date.now() - 30 * 60 * 1000),
          priority: 'high',
          type: 'approval',
          icon: 'cuIcon-check',
          priorityClass: 'priority-high',
          timeText: '30分钟前'
        },
        {
          id: 2,
          title: '异常处理',
          description: '切割工序设备故障，需要处理',
          time: new Date(Date.now() - 60 * 60 * 1000),
          priority: 'urgent',
          type: 'exception',
          icon: 'cuIcon-warn',
          priorityClass: 'priority-urgent',
          timeText: '1小时前'
        },
        {
          id: 3,
          title: '质量检查',
          description: '批次QC2024001质量检查结果待确认',
          time: new Date(Date.now() - 2 * 60 * 60 * 1000),
          priority: 'medium',
          type: 'quality',
          icon: 'cuIcon-check',
          priorityClass: 'priority-medium',
          timeText: '2小时前'
        }
      ]
    }
  },
  
  computed: {
    equipmentStatusClass() {
      const statusMap = {
        '正常': 'text-green',
        '异常': 'text-red',
        '维护': 'text-orange'
      }
      return statusMap[this.monitorData.equipmentStatus] || 'text-gray'
    }
  },
  
  onLoad() {
    this.loadData()
  },
  
  methods: {
    // 加载数据
    loadData() {
      // 模拟数据加载，实际应调用API
      this.refreshMonitorData()
    },
    
    // 刷新监控数据
    refreshMonitorData() {
      // 模拟实时数据更新
      console.log('刷新监控数据')
    },
    
    // 管理概览点击事件
    goToProductionPlan() {
      uni.navigateTo({
        url: '/pages/production/plan/list'
      })
    },
    
    goToTaskManagement() {
      uni.navigateTo({
        url: '/pages/production/task/management'
      })
    },
    
    goToEmployeeManagement() {
      uni.navigateTo({
        url: '/pages/production/employee/list'
      })
    },
    
    goToExceptionManagement() {
      uni.navigateTo({
        url: '/pages/production/exception/management'
      })
    },
    
    // 处理待处理事项
    handlePendingItem(item) {
      const handlers = {
        approval: () => this.handleApproval(item),
        exception: () => this.handleException(item),
        quality: () => this.handleQuality(item)
      }
      
      const handler = handlers[item.type]
      if (handler) {
        handler()
      }
    },
    
    handleApproval(item) {
      uni.navigateTo({
        url: `/pages/production/plan/approval?id=${item.id}`
      })
    },
    
    handleException(item) {
      uni.navigateTo({
        url: `/pages/production/exception/detail?id=${item.id}`
      })
    },
    
    handleQuality(item) {
      uni.navigateTo({
        url: `/pages/production/quality/detail?id=${item.id}`
      })
    },
    
    // 快捷管理操作
    createProductionPlan() {
      uni.navigateTo({
        url: '/pages/production/plan/create'
      })
    },
    
    assignTasks() {
      uni.navigateTo({
        url: '/pages/production/task/assign'
      })
    },
    
    viewReports() {
      uni.navigateTo({
        url: '/pages/production/report/index'
      })
    },
    
    systemSettings() {
      uni.navigateTo({
        url: '/pages/production/settings/index'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.production-admin-workspace {
  padding: 24rpx;
}

.section-title {
  border-bottom: 1rpx solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.management-overview {
  border-radius: 12rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
  
  .overview-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24rpx;
    
    .overview-item {
      display: flex;
      align-items: center;
      padding: 20rpx;
      border-radius: 8rpx;
      background-color: #fafafa;
      
      .overview-icon {
        width: 60rpx;
        height: 60rpx;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 16rpx;
        
        .cuIcon {
          font-size: 28rpx;
        }
      }
      
      .overview-info {
        flex: 1;
        
        .overview-number {
          font-size: 32rpx;
          font-weight: bold;
          color: #333;
        }
        
        .overview-label {
          font-size: 24rpx;
          color: #666;
          margin-top: 4rpx;
        }
      }
    }
  }
}

.real-time-monitor {
  border-radius: 12rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
  
  .monitor-content {
    .monitor-row {
      display: flex;
      justify-content: space-between;
      margin-bottom: 24rpx;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .monitor-item {
        flex: 1;
        text-align: center;
        
        .monitor-label {
          font-size: 24rpx;
          color: #666;
          margin-bottom: 8rpx;
        }
        
        .monitor-value {
          font-size: 28rpx;
          font-weight: bold;
        }
      }
    }
  }
}

.pending-items {
  border-radius: 12rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
  
  .pending-list {
    .pending-item {
      border-bottom: 1rpx solid #f0f0f0;
      
      &:last-child {
        border-bottom: none;
      }
      
      .pending-icon {
        width: 48rpx;
        height: 48rpx;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        
        &.priority-urgent {
          background-color: #ff4d4f;
          color: white;
        }
        
        &.priority-high {
          background-color: #fa8c16;
          color: white;
        }
        
        &.priority-medium {
          background-color: #1890ff;
          color: white;
        }
        
        .cuIcon {
          font-size: 24rpx;
        }
      }
      
      .pending-title {
        font-size: 28rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 4rpx;
      }
      
      .pending-desc {
        line-height: 1.4;
      }
      
      .pending-time {
        white-space: nowrap;
      }
    }
  }
}

.quick-management {
  border-radius: 12rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
  
  .management-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24rpx;
    
    .management-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20rpx 12rpx;
      
      .management-icon {
        width: 60rpx;
        height: 60rpx;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 12rpx;
        
        .cuIcon {
          font-size: 28rpx;
        }
      }
      
      .management-label {
        font-size: 24rpx;
        color: #333;
        text-align: center;
      }
    }
  }
}
</style>
